<script setup lang="ts">
defineProps(['scene'])
import { storeToRefs } from 'pinia'
import { useCategoryStore } from '@/stores/modules/category'
const categoryStore = useCategoryStore()
const { getCategory1, getCategory2, getCategory3, getAttrInfoList } = categoryStore
const { cate1Id, cate2Id, cate3Id, category1Arr, category2Arr, category3Arr } = storeToRefs(categoryStore)

onMounted(() => {
  getCategory1()
})
const handleCategory1 = () => {
  cate2Id.value = ''
  cate3Id.value = ''
  category2Arr.value = []
  category3Arr.value = []
  getCategory2()
}
const handleCategory2 = () => {
  // categoryStore.cate3Id = '' // 失去响应式
  cate3Id.value = ''
  category3Arr.value = []
  getCategory3()
}
// const handleCategory3 = () => {
//   // getAttrInfoList()
// }
</script>
<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="一级分类">
          <el-select v-model="cate1Id" @change="handleCategory1" :disabled="scene !== 0">
            <el-option v-for="cate1 in category1Arr" :key="cate1.id" :label="cate1.name" :value="cate1.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="cate2Id" @change="handleCategory2" :disabled="scene !== 0">
            <el-option v-for="cate2 in category2Arr" :key="cate2.id" :label="cate2.name" :value="cate2.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select v-model="cate3Id" :disabled="scene !== 0">
            <el-option v-for="cate3 in category3Arr" :key="cate3.id" :label="cate3.name" :value="cate3.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped></style>
